<template>
  <div>

	<myheader></myheader>


	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="src+this.img">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a></div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{ name }}</h2>
					<p class="lead mt-2 mb-3 primary-color">{{ price }}￥</p>
					<h5 class="mt-4">商品简介</h5>
					<p v-html="desc">{{ desc }}</p>
					<h5 class="mt-4">商品标签</h5>
					<p>{{ tags }}</p>
					<h5 class="mt-5">商品规格</h5>
					<p>color：{{ color }}</p>
					<p>size：{{ size }}</p>

					<!--收藏按钮-->
					<el-button type="primary" @click="collects">{{ collect }}</el-button>
					<p>已有{{ collect_count }}位用户收藏了本商品</p>
					<p>{{ users }}</p>
					<h5 class="mt-6">微视频展示</h5>
					<video :src="src+video" controls autoplay width="200px" height="200px"></video>
					<!--<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>-->

					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					<br>
					<a href="#" class="btn btn-full-width btn-lg btn-outline-primary">添加到购物车</a></div>
			</div>
		</div>
	</section>

	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>

	<div class="divider"></div>


	<!-- 方案一 -->
	<!--<section class="products text-center">
		<div class="container">
			<ul>
				<li v-for="item in contentlist">
					{{ item.uid | myfilter }}  :  {{ item.content }}

				</li>
			</ul>
		</div>
	</section>-->

	<!-- 方案二 -->
	<!--<section class="products text-center">
		<div class="container">
			<template>
				<el-table
				:data="contentlist"
				style="width: 100%">
				<el-table-column
					prop="create_time"
					label="评论时间"
					width="180">
				</el-table-column>
				<el-table-column
					prop="uid"
					label='用户'
					width="180">
				</el-table-column>
				<el-table-column
					prop="content"
					label="评论内容">
				</el-table-column>
				</el-table>
			</template>
			<Pagination v-model="pagination" @change="change" layout="pager,jumper"></Pagination><br>
		</div>
	</section>-->

	<div class="divider"></div>
	<section class="products text-center">
		<comments :contentlist="this.contentlist" :myuser='this.myuser'></comments>
		<Pagination v-model="pagination" @change="change" layout="pager,jumper"></Pagination>
	</section>



	<div class="divider"></div>

	<section class="products text-center">
		<div class="container">
			<textarea v-model="content"></textarea>
			<br/>
			<Button color='blue' @click='comment'>发表评论</Button>
		</div>
	</section>


	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>


	</footer>

  </div>

</template>



<script>
import myheader from './myheader.vue';
import axios from 'axios'
import {config} from '../config.js'
import comments from './comments'
export default {
  data () {
    return {
      msg: "这是一个变量",
	  //用户id
	  uid:0,
	  //商品id
	  gid:0,
	  src:'',
	  name:'',
	  price:'',
	  img:'',
	  video:'',
	  color:'',
	  size:'',
	  desc:'',
	  tags:'',
	  //发表评论内容
	  content:'',
	  //获取该商品的全部评论
	  contentlist:[],
	  //用户信息字典
	  myuser:{},
	  //分页器数据
	  pagination:{
		  page:1,
		  size:6,
		  total:0
	  },
	  //收藏按钮
	  collect:'收藏',
	  //收藏人数
	  collect_count:0,
	  //收藏本商品的用户名称
	  users:[],
    }
  },
  //注册组件标签
  	components:{
        'myheader':myheader,
		comments,
    },
  	mounted:function(){
		//接收index跳转时携带的id参数
		this.gid = this.$route.query.id;
		this.goodinfo();
		this.uid = localStorage.getItem('uid');
		//获取评论
		this.getcomment();
		this.change();
		//获取用户信息
		this.getuser();
		//判断用户是否已经收藏
		this.getcollect();
		this.gidflow();
		//商品访问量+1
		this.goodsclick();
	},
	// //在渲染之前定义that变量
	// beforeCreate(){
	// 	window.that=this;
	// },
	// //自定义过滤器
	// filters:{
	// 	//自定义方法
	// 	myfilter:function (value) {
	// 		//通过key(用户id)获取用户名
	// 		return window.that.myuser[value]
	// 	}
	// },
  	methods:{
		//渲染都有哪些用户收藏了此商品
		gidflow(){
			axios.get(config['djurl']+'gidflow/',{params:{gid:this.gid}}).then(res=>{
				let user = [];
				for(let i=0,l=res.data.length;i<l;i++){
					user.push(res.data[i][0])
					this.users = user;
				}
			})
		},

		//判断当前用户是否已经收藏本商品
		getcollect(){
			axios.get(config['djurl']+'getcollect/',{params:{uid:this.uid,gid:this.gid}}).then(res=>{
				if(res.data.code == 200){
					this.collect = '取消收藏'
				}
				let collect_ser = res.data.collect_ser
				this.collect_count = collect_ser.length
			})
		},

		//获取所有用户信息
		getuser(){
			axios.get(config['djurl']+'getuser/').then(res=>{

				//动态赋值
				for(let i=0,l=res.data.length;i<l;i++){
					this.myuser[res.data[i].id] = res.data[i].username;
					// console.log(this.myuser)
				}
			})
		},

		//评论方法
		comment(){
			if (this.content == ''){
				this.$Message('请输入您的评论。')
				return false
			}
			axios.post(config['djurl']+'insertcomment/',this.qs.stringify({'uid':this.uid,'content':this.content,'gid':this.gid})).then(res=>{

				this.$Message(res.data.message)
				if (res.data.code == 200){
					this.contentlist.unshift({'uid':this.uid,'content':this.content});
					this.content = '';
					// this.getcomment();
				}
			})
		},

		//获取商品数据
		goodinfo(){
			axios.get(config['djurl']+'goodinfo/',{params:{id:this.gid}}).then(res=>{
				this.name = res.data.data.name;
				this.desc = res.data.data.desc;
				this.price = res.data.data.price;
				this.img = res.data.data.img;
				this.video = res.data.data.video;
				this.src = config['qiniu'];

				let parms = res.data.data.parms;
				let param = JSON.parse(parms);
				this.size = param.size;
				this.color = param.color;

				})
			axios.get(config['djurl']+'gettags/',{params:{'id':this.gid}}).then(res=>{

					this.tags = res.data.tags.join(',')
				})
		},
		//获取当前商品的所有评论
		getcomment(){
			axios.get(config['djurl']+'getcomment/',{params:{'gid':this.gid}}).then(res=>{
				let contents = res.data
				let contentdict = []
				for (let i=0,l=contents.length;i<l;i++){
					contentdict.push(contents[i])
				}
				this.contentlist = contentdict
			})
		},
		//评论分页
		change(){
			axios.get(config['djurl']+'contentlist/',{params:{page:this.pagination.page,
				size:this.pagination.size,gid:this.gid}}).then(res=>{
					// console.log(res.data.data);
					let contents = res.data.data;
					let contentlist = [];
					for(let i=0,l=contents.length;i<l;i++){
						contentlist.push(contents[i])
					}
					this.contentlist = contentlist;
					// console.log(this.contentlist);

					this.pagination.total = res.data.total;
			})
		},
		//收藏
		collects(){
			if (this.collect=='收藏'){
				let data = new FormData();
				data.append('uid',this.uid);
				data.append('gid',this.gid);
				axios.post(config['djurl']+'collect/',data).then(res=>{
				if (res.data.code == 200){
					this.$Message(res.data.message)
					this.getcollect();
					this.collect = '取消收藏'
					}
				this.gidflow();
				})
			}
			else{
				axios.get(config['djurl']+'collect/',{params:{uid:this.uid,gid:this.gid}}).then(res=>{
					if(res.data.code==200){
						this.$Message(res.data.message)
						this.getcollect();
						this.collect = '收藏'
					}
					this.gidflow();
				})
			}
		},
		//商品访问量+1
		goodsclick(){
			axios.get(config['djurl']+'goodclick/',{params:{gid:this.gid}}).then(res=>{
				this.$Message(res.data.message)
			})
		}
  	}
}


</script>

<style>



</style>
